<template>
  <div class="block">
    <!--头像-->
    <el-avatar
      :src="avatarUrl"
      :size="64"
      @click.native="openUserPage"
      style="cursor: pointer"
    />
    <!--简介-->
    <div class="block-right">
      <!--昵称-->
      <div class="nickname" @click="openUserPage">{{ userInfo.nickname }}</div>
      <!--个性签名-->
      <div v-if="userInfo.signature">{{ userInfo.signature }}</div>
      <div v-else>这人竟然还没有简介￣へ￣</div>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'

export default {
  name: 'UserBlock',
  props: {
    userInfo: {
      required: true
    }
  },
  computed: {
    avatarUrl () {
      return baseUrl + this.userInfo.avatar
    }
  },
  methods: {
    openUserPage () {
      const routeData = this.$router.resolve({
        path: '/userPage',
        query: {
          id: this.userInfo.id
        }
      })
      window.open(routeData.href)
    }
  }
}
</script>

<style scoped lang="less">
.block {
  display: flex;

  .block-right {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: @menuText_gray;
    font-size: small;

    .nickname {
      color: @menuText;
      font-size: medium;
      cursor: pointer;
    }
  }
}
</style>
